<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row :gutter="8">
          <a-col :md="8" :sm="12">
            <a-form-item
              :label="$t('key.kkyx')"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select  v-decorator="['kkyxm',
                {
                  rules: [{ required: true, message: '请选择培养单位!' }],
                }]" @change="yxChange" showSearch :filterOption="filterOption" disabled>
                <a-select-option v-for="i in selectMenu.yxList" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              :label="$t('key.kcmc')"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select v-decorator="['kcbm',
                {
                  rules: [{ required: true, message: '请选择课程!' }],
                }]" @change="kcChange" showSearch :filterOption="filterOption" disabled>
                <a-spin v-if="kcLoading" slot="notFoundContent" size="small"/>
                <a-select-option v-for="(i,index) in selectMenu.courseList" :key="index" :value="i.kch">{{ i.kch }}{{ i.kcmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item
              :label="$t('key.skzlx')"
              :labelCol="{span: 7,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}"
            >
              <a-select :disabled="!!last" v-decorator="['tzhskzlxm',
                {
                  rules: [{ required: true, message: '请输入上课周类型!' }],
                }]">
                <a-select-option v-for="i in TYPE0343" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <p class="sub-title_text">原定上课时间：</p>
        <a-row class="inline-form">
          第
          <a-form-item>
            <a-input-number
                  style="width: 100px"
                  :max="99"
                  v-decorator="['yksz',
                  {
                    rules: [{ required: true, message: '请输入开始周!' }],
                  }]"
                />
            </a-form-item>
            周至
          <a-form-item>
            <a-input-number
                style="width: 100px"
                :max="99"
                v-decorator="['yjsz',
                {
                  rules: [{ required: true, message: '请输入结束周!' }],
                }]"
              />
            </a-form-item>
              周，
          <a-form-item>
              <a-select
                style="width: 100px"
                disabled
                v-decorator="['yskz',
                {
                  rules: [{ required: true, message: '请输入上课周!' }],
                }]"
              >
                <a-select-option v-for="i in TYPE0344" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              ，第
          <a-form-item>
              <a-select
                style="width: 100px"
                disabled
                v-decorator="['ykskj',
                {
                  rules: [{ required: true, message: '请输入开始课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 1)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              至
          <a-form-item>
              <a-select
                style="width: 100px"
                disabled
                v-decorator="['yjskj',
                {
                  rules: [{ required: true, message: '请输入结束课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 0)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              节，上课地点：
          <a-form-item>
              <a-input
                disabled
                style="width: 100px"
                v-decorator="['yrkjs',
                {
                  rules: [{ required: true, message: '上课地点!' }],
                }]"
              />
            </a-form-item>
        </a-row>
        <p class="sub-title_text">调课时间：</p>
        <a-row class="inline-form">
          第
          <a-form-item>
            <a-input-number
                  style="width: 100px"
                  :max="99"

                  v-decorator="['tzhksz',
                  {
                    rules: [{ required: true, message: '请输入开始周!' }],
                  }]"
                />
            </a-form-item>
            周至
          <a-form-item>
            <a-input-number
                style="width: 100px"
                :max="99"
                v-decorator="['tzhjsz',
                {
                  rules: [{ required: true, message: '请输入结束周!' }],
                }]"
              />
            </a-form-item>
              周，
          <a-form-item>
              <a-select
                style="width: 100px"
                v-decorator="['tzhskz',
                {
                  rules: [{ required: true, message: '请输入上课周!' }],
                }]"
              >
                <a-select-option v-for="i in TYPE0344" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              ，第
          <a-form-item>
              <a-select
                style="width: 100px"
                v-decorator="['tzhkskj',
                {
                  rules: [{ required: true, message: '请输入开始课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 1)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              至
          <a-form-item>
              <a-select
                style="width: 100px"
                v-decorator="['tzhjskj',
                {
                  rules: [{ required: true, message: '请输入结束课节!' }],
                }]"
              >
                <a-select-option
                  v-for="i in TYPE0331.filter(i => i.code % 2 === 0)"
                  :key="i.id"
                  :value="i.code"
                >{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
              节，上课地点：
          <a-form-item>
              <a-input
                style="width: 100px"
                disabled
                v-decorator="['tzhjs',
                {
                  rules: [{ required: true, message: '上课地点!' }],
                }]"
              />
            </a-form-item>
            <a-button style="margin-left: 20px" type="primary" @click="showChoose('classroom')">选择教室</a-button>
        </a-row>
        <a-row>
          <a-form-item
            label="调课原因"
            :labelCol="{span: 2,offset: 1}"
            :wrapperCol="{span: 12, offset: 1}"
          >
            <a-textarea v-decorator="['tkyy',
                {
                  rules: [{ required: true, message: '请输入调课原因!' }],
                }]"/>
          </a-form-item>
        </a-row>
          <!-- <a-card style="margin-top: 10px;">
            <h3>添加听课学生</h3>
            <a-button type="primary" @click="showChoose('student')">选择学生</a-button>
          </a-card> -->

        <a-form-item :wrapperCol="{span: 39, offset: 5}" style="margin-top: 30px;">
          <a-button :loading="loading" type="primary" @click="toNext">提交申请</a-button>
          <a-button style="margin-left: 8px" @click="goBack">返回列表</a-button>
        </a-form-item>
      </a-form>
    </a-card>

<!--     <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="goBack">返回列表</a-button>

       <a-button style="margin-left: 50px;" type="primary" @click="toNext">{{ editId ? '提交保存' : '下一步' }}</a-button>
       <a-button style="float: right;margin-top: 10px;" @click="">{{'上一步'}}</a-button>
    </div>-->

    <choose-modal
      ref="choose"
      :visible="chooseVisible"
      :title="chooseTitle"
      :TYPE0126="TYPE0126"
      :type="chooseType"
      :editId="editId"
      :authYxList.sync="selectMenu.yxList"
      @cancel="chooseVisible = false"
      @updatePk="updatePk"/>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import DetailList from '~/tool/DetailList'
import chooseModal from './components/chooesModal'
const DetailListItem = DetailList.Item

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      selectMenu: {},
      kcLoading: false,
      chooseVisible: false,
      chooseType: null,
      chooseTitle: '',
      editId: null,
      last: false,
      loading: false,
      pkInfo: {},
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 14 },
      },
    }
  },
  components: { DetailList, DetailListItem, chooseModal},
  computed: {
    ...mapState({
      TYPE0125: state => state.app['TYPE0125'],
      TYPE0126: state => state.app['TYPE0126'],
      TYPE0072: state => state.app['TYPE0072'],
      TYPE0343: state => state.app['TYPE0343'],
      TYPE0344: state => state.app['TYPE0344'],
      TYPE0331: state => state.app['TYPE0331'] || [],
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0125')
    this.$store.dispatch('app/setDictionary', 'TYPE0126')
    this.$store.dispatch('app/setDictionary', 'TYPE0072')
    this.$store.dispatch('app/setDictionary', 'TYPE0343')
    this.$store.dispatch('app/setDictionary', 'TYPE0344')
    this.$store.dispatch('app/setDictionary', 'TYPE0331')
    this.initSelectMenu()
    this.initForm()
    // console.log(this.$route)
    // this.editId = this.$route.query.id
    // this.getInfo(this.editId)
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data
        }
      })
    },
    initForm () {
      this.$api.cultivate.pkDetail(this.$route.query.id).then(res => {
        let detail = res.data
        this.pkInfo = detail
        let infoData = detail
        if (infoData.kkyxm) {
          this.yxChange(infoData.kkyxm)
        }
        let keys = Object.keys(this.form.getFieldsValue())
        let obj = {}

        keys.forEach(key => {
          obj[key] = infoData[key]
        })

        obj.yjskj = infoData.jskj;
        obj.yjsz = infoData.jsz;
        obj.ykskj = infoData.kskj;
        obj.yksz = infoData.ksz;
        obj.yskz = infoData.skz;
        obj.yrkjs = infoData.classroomNo;

        obj.tzhjskj = infoData.jskj
        obj.tzhjsz = infoData.jsz
        obj.tzhkskj = infoData.kskj
        obj.tzhksz = infoData.ksz
        obj.tzhskz = infoData.skz
        obj.tzhskzlxm = infoData.skzlxm
        obj.tzhjs = infoData.classroomNo
        this.form.setFieldsValue(obj)
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    yxChange (code) {
      this.form.setFieldsValue({kcbm: ''})
      this.$set(this.selectMenu, 'courseList', [])
      if (code) {
        this.kcLoading = true
        this.$api.cultivate.courseAll({kcssyxm: code}).then(res => {
          this.$set(this.selectMenu, 'courseList', res.data)
        }).finally(() => {
          this.kcLoading = false
        })
      } else {
        this.$set(this.selectMenu, 'courseList', [])
      }
    },
    kcChange (kch) {
      let kc = this.selectMenu.courseList.find(kc => {
        return kc.kch === kch
      })
      this.form.setFieldsValue({
        xs: kc.zxs,
        xf: kc.xf
      })
    },
    toNext () {
      console.log(this.pkInfo)
      this.$confirm({
        title: '提示',
        content: '提交申请后，需要院系领导和培养办审核，审核期间不能再次修改，学生不能退课不能选择和调课时间冲突的课程。',
        centered: true,
        onOk: () => {
          this.postSave()
        },
        onCancel: () => {
        }
      })
    },
    postSave () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        this.loading = true
        let params = Object.assign({
          pkxxId: this.pkInfo.id,
          tzhjs: this.pkInfo.classroomNo,
          dsbh: this.pkInfo.rkjszgh
        }, values)
        this.$api.cultivate.tksqAdd(params).then(res => {
          this.$message.success(res.msg)
          this.$router.back()
        }).finally(() =>{
          this.loading = false
        })
      })
    },
    showChoose (type) {
      this.$refs.choose.searchForm = Object.assign({}, this.form.getFieldsValue())
      // this.$refs.choose.teacherNote = this.pkInfo.rkjssm
      this.chooseVisible = true
      this.chooseType = type
      this.chooseTitle = (type === 'teacher' ? '选择教师' : '选择教室')
    },
    updatePk (data) {
      this.pkInfo = Object.assign(this.pkInfo, data, {tzhjs: data.classroomNo});
      this.form.setFieldsValue({tzhjs: data.classroomNo})
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>


<style lang="less">
.sub-title_text{
  font-size: 16px;
  font-weight: bold;
  padding-left: 10px;
}
.inline-form {
  color: rgba(0, 0, 0, 0.85);
  line-height: 40px;
  padding-left: 20px;
  .ant-form-item{
    display: inline-block;
  }
}
</style>
